﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>FooTable - jQuery plugin for responsive HTML tables</title>
    <meta name="viewport" content="width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no"/>
	<link href="../css/bootstrap.css" rel="stylesheet" type="text/css"/>
	<link href="../../css/footable.core.css?v=2-0-1" rel="stylesheet" type="text/css"/>
    <link href="../css/footable-demos.css" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script>
        if (!window.jQuery) { document.write('<script src="js/jquery-1.9.1.min.js"><\/script>'); }
    </script>
    <script src="../../js/footable.js?v=2-0-1" type="text/javascript"></script>
	<script src="../js/bootstrap-tab.js" type="text/javascript"></script>
    <script src="../js/demos.js" type="text/javascript"></script>
    <style>
        .CarClassHeader {
            background-color:#003fb3;
            color:#ffffff;
        }

        .CarClassHeader:first-child:hover {
            background-color:#003fb3;
        }

        .CarClassHeader:a {
            display:none;
        }
    </style>
</head>
<body>
	<div class="demo-container">
        <ul class="breadcrumb">
            <li><a href="http://fooplugins.com/plugins/footable-jquery/">FooTable</a> <span class="divider">&raquo;</span></li>
            <li><a href="index.htm">Demos</a> <span class="divider">&raquo;</span></li>
            <li class="active">Accordion</li>
        </ul>
        <div class="alert">
            Turn your FooTable into an accordion
		</div>
        <ul class="nav nav-tabs">
            <li class="active"><a href="#demo">Demo</a></li>
            <li><a href="#docs">Docs</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="demo">
                <table class="footable table table-bordered">

                    <thead>
                    <tr>
                        <th > <!-- always show place -->
                            Place</th>
                        <th data-hide="phone, tablet">
                            Class</th>
                        <th data-hide="phone, tablet">
                            #</th>
                        <th> <!-- name is expandable row when smallified -->
                            Name</th>
                        <th data-hide="phone">
                            Car</th>
                        <th data-hide="phone">
                            Run 1</th>
                        <th data-hide="phone">
                            Run 2</th>
                        <th data-hide="phone">
                            Run 3</th>
                        <th data-hide="phone">
                            Run 4</th>
                        <th> <!-- show all best times -->
                            Best</th>
                        <th data-hide="phone">
                            Diff</th>
                    </tr>
                    </thead>

                    <tbody>
                    <tr class="footable-no-expand CarClassHeader">
                        <td colspan="5"><a name="ss"></a>ss - 'Super Stock' - Total Entries: 1  Trophies: 1</td>
                        <td colspan="4">Times</td>
                        <td>Best</td>
                        <td>Diff</td>
                    </tr>
                    <tr class=rowlow>
                        <td  align="center">1T</td>
                        <td  align="right">ss</td>
                        <td  align="right">117</td>
                        <td>Ryan Palmer</td>
                        <td>Silver 02 Chevrolet Z06</td>
                        <td>56.393</td>
                        <td>59.167+2</td>
                        <td>58.512+2</td>
                        <td><font class='bestt'>54.006</font></td>
                        <td><font class='bestt'>54.006</font></td>
                        <td>-</td>
                    </tr>

                    <tr class="footable-no-expand CarClassHeader">
                        <td colspan="5"><a name="bs"></a>bs - 'B Stock' - Total Entries: 3  Trophies: 1</td>
                        <td colspan="4">Times</td>
                        <td>Best</td>
                        <td>Diff</td>
                    </tr>
                    <tr class=rowhigh>
                        <td  align="center">1T</td>
                        <td  align="right">bs</td>
                        <td  align="right">1138</td>
                        <td>Kyle Sklareski</td>
                        <td>Red 90 Chevrolet Corvette</td>
                        <td><font class='bestt'>57.132</font></td>
                        <td>70.937+3</td>
                        <td>59.295+1</td>
                        <td>58.446</td>
                        <td><font class='bestt'>57.132</font></td>
                        <td>[-]0.672</td>
                    </tr>
                    <tr class=rowlow>
                        <td  align="center">2 </td>
                        <td  align="right">bs</td>
                        <td  align="right">138</td>
                        <td>Tony Sklareski</td>
                        <td>Red 90 Chevrolet Corvette</td>
                        <td>60.508+off</td>
                        <td>59.385</td>
                        <td>60.508+1</td>
                        <td><font class='bestt'>57.804</font></td>
                        <td><font class='bestt'>57.804</font></td>
                        <td>+0.672</td>
                    </tr>

                    <tr class="footable-no-expand CarClassHeader">
                        <td   colspan="5"><a name="cs"></a>cs - 'C Stock' - Total Entries: 4  Trophies: 2</td>
                        <td colspan="4">Times</td>
                        <td>Best</td>
                        <td>Diff</td>
                    </tr>
                    <tr class=rowlow>
                        <td  align="center">1T</td>
                        <td  align="right">cs</td>
                        <td  align="right">207</td>
                        <td>Chad Kettler</td>
                        <td>Silver 10 Mazda Mx-5</td>
                        <td>59.978+1</td>
                        <td>57.594</td>
                        <td><font class='bestt'>57.221</font></td>
                        <td>60.459+2</td>
                        <td><font class='bestt'>57.221</font></td>
                        <td>[-]3.821</td>
                    </tr>
                    <tr class=rowhigh>
                        <td  align="center">2T</td>
                        <td  align="right">cs</td>
                        <td  align="right">223</td>
                        <td>Roland Zuk</td>
                        <td>Blue 13 Subaru BRZ</td>
                        <td><font class='bestt'>61.042</font></td>
                        <td>64.248+2</td>
                        <td>59.101+off</td>
                        <td>60.010+off</td>
                        <td><font class='bestt'>61.042</font></td>
                        <td>+3.821</td>
                    </tr>


                    </tbody>
                </table>

            </div>
            <div class="tab-pane" id="docs">
                <h4>FooTable Accordion</h4>
                <p>1. You first need to bind to the <code>footable_row_expanded</code> event</p>
                <p>2. Then inside the event, find all rows that are already expanded (other than the row you clicked on)</p>
                <p>3. For each row found, call the FooTable function <code>toggleDetail</code></p>
                <pre>$(&#39;.footable&#39;).footable().bind(&#39;footable_row_expanded&#39;, function(e) {
	$(&#39;.footable tbody tr.footable-detail-show&#39;).not(e.row).each(function() {
		$(&#39;.footable&#39;).data(&#39;footable&#39;).toggleDetail(this);
	});
});</pre>
            </div>
        </div>
	</div>
    <script type="text/javascript">
        $(function () {
            $('.footable').footable().bind('footable_row_expanded', function(e) {
                $('.footable tbody tr.footable-detail-show').not(e.row).each(function() {
                    $('.footable').data('footable').toggleDetail(this);
                });
            });
        });
    </script>
</body>
</html>
